<template>
  <a-drawer
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增充值规则' : '修改充值规则'"
    width="40%"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="商户号" name="mchNo">
            <JeepaySearchInfoInput v-model:value="vdata.saveObject['mchNo']" placeholder="请输入" :disabled="!vdata.isAdd" :onlyMchName="true" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态" name="state">
            <a-radio-group v-model:value="vdata.saveObject['state']">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="0">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="充值金额" name="rechargeAmount">
            <a-input-number
              v-model:value="vdata.saveObject['rechargeAmount']"
              :min="0.01"
              :max="1000000000"
              :precision="2"
              placeholder="请输入充值金额"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="赠送金额" name="giveAmount">
            <a-input-number
              v-model:value="vdata.saveObject['giveAmount']"
              :min="0.01"
              :max="1000000000"
              :precision="2"
              placeholder="请输入赠送金额"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序" name="sort">
            <a-input-number v-model:value="vdata.saveObject['sort']" placeholder="请输入排列顺序" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" name="remark" class="m-b-50 ">
            <a-input v-model:value="vdata.saveObject['remark']" placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { API_URL_MEMBER_RECHARGE_RULE_LIST, req } from '@/api/manage'
import {ref, reactive} from 'vue'

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})
  
const vdata : any =  reactive({
  isAdd: true, // 新增 or 修改
  visible: false, // 抽屉开关
  recordId: '', // ID
  saveObject: {}, // 数据对象
  btnLoading:false,
  rules: {
    rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
    mchNo: [{ required: true, message: '请选择商户号', trigger: 'blur' }],
    state: [{ required: true, message: '请输选择状态', trigger: 'blur' }],
  }
})

// 表单组件
const infoFormModel = ref()

// 抽屉显示
const show = (mchNo, recordId) => {
  vdata.isAdd = !recordId

  vdata.recordId = recordId
  // 数据清空
  vdata.saveObject = { state: 1 }

  if (mchNo) {
    vdata.saveObject.mchNo = mchNo
  }
  
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  if (recordId) { // 修改信息 延迟展示弹层
    // 拉取详情
    req.getById(API_URL_MEMBER_RECHARGE_RULE_LIST, recordId).then(res => {
      vdata.saveObject = res
      if (vdata.saveObject.rechargeAmount) {
        vdata.saveObject.rechargeAmount = vdata.saveObject.rechargeAmount / 100
      }
      if (vdata.saveObject.giveAmount) {
        vdata.saveObject.giveAmount = vdata.saveObject.giveAmount / 100
      }
    })

    vdata.visible = true
  } else {
    vdata.visible = true // 展示弹层信息
  }
}
// 表单提交
const onSubmit = () => {

  infoFormModel.value.validate().then(() => {

    vdata.btnLoading = true
    let reqObject = Object.assign({}, vdata.saveObject) // 请求数据

    console.log(vdata.isAdd)
    
    req.addOrUpdate(vdata.isAdd ? null : vdata.recordId, API_URL_MEMBER_RECHARGE_RULE_LIST, reqObject).then(res => {
        vdata.visible = false
        props.callbackFunc() // 刷新列表
    }).finally(() => {
        vdata.btnLoading = false
    })
  })
}

const onClose = () => {
  vdata.visible = false
}

defineExpose({ show })
</script>

